import styled from "styled-components";

export const LongForWrapper = styled.div`
  .list {
    .scroll-content {
      margin: 0 -8px;
    }
  }
  .inner {
    padding: 0 8px;
    width: 20%;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    .imgWrapper {
      position: relative;
      .imgCover {
        position: absolute;
        height:60%;
        bottom: 0;
        left: 0;
        right: 0;
        background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 3%, rgb(0, 0, 0) 100%);
        color: white;
        border-radius: 3px;
        overflow: hidden; 
        /* text-align: center; */

        .info {
          position: absolute;
          width: 100%;
          bottom: 24px;
          line-height: 24px;
          text-align: center;
        }
      }
      >img {
        width: 100%;
      }
    }
  }
  
`